<template>
  <view class="page-wrapper">
    <view class="info-wrapper">
      <block v-for="(v, i) in vdata.mchInfoList" :key="i">
        <view class="info-main">
          <view class="info-title">{{ v.title }}</view>
          <view class="info-text">
            <view v-if="v.clsName" class="flex-center" :class="[v.clsName]">{{ v.text }}</view>
            <text v-else>{{ v.text }}</text>
          </view>
          <view class="info-copy" v-if="v.copy" @tap="copyInfo(v.text)">复制</view>
        </view>
      </block>
      <view class="info-button flex-center" @tap="allCopyInfo"> 全部复制 </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from "vue"
import { onLoad } from '@dcloudio/uni-app'
import { $getMchInfo } from "@/http/apiManager.js"
import infoBox from '@/commons/utils/infoBox.js'

const vdata = reactive({
	mchInfoList: [ ]
})

onLoad((options) => {
	$getMchInfo().then(({bizData}) => {
		
		let mchTye = bizData.type == 1 ? '普通商户': '特约商户'
		
		vdata.mchInfoList.push({ title: "商户名称", text: bizData.mchName, copy: true })
		vdata.mchInfoList.push({ title: "商户简称", text: bizData.mchShortName, copy: true })
		vdata.mchInfoList.push({ title: "商户号", text: bizData.mchNo, copy: true })
		vdata.mchInfoList.push({ title: "商户类型", text: mchTye, clsName: "info-tag", copy: false })
		
		if(bizData.isvNo){
			vdata.mchInfoList.push({ title: "服务商号", text: bizData.isvNo, copy: true })
		}
		
		vdata.mchInfoList.push({ title: "注册时间", text: bizData.createdAt, copy: false })
	})
})


const copyInfo = (val) => {
  uni.setClipboardData({ data: val}).then(() => {
  	 infoBox.showSuccessToast('复制成功')
  })
}
// 全部复制 格式化数据
const allCopyInfo = () => {
  const infoStr = []
  vdata.mchInfoList.forEach((v) => {
    infoStr.push(v.title + "：" + v.text)
  })
  copyInfo(infoStr.join("\n"))
}
</script>

<style lang="scss" scoped>
.page-wrapper {
  min-height: 100vh;
  background-color: $v-color-bgrey;
  .info-wrapper {
    padding-top: 20rpx;
    background-color: $J-bg-ff;
    .info-main {
      display: flex;
      align-items: center;
      padding: 0 40rpx;
      height: 120rpx;
      .info-title {
        width: 198rpx;
        font-size: 32rpx;
        color: $J-color-t4d;
      }
      .info-text {
        flex: 1;
        font-size: 32rpx;
      }
      .info-copy {
        font-size: 32rpx;
        color: #5884cc;
      }
      .info-tag {
        width: 122rpx;
        height: 42rpx;
        font-size: 23rpx;
        color: #fff;
        border-radius: 6rpx;
        background: linear-gradient(270deg, rgba(255, 162, 22, 1) 0%, rgba(241, 112, 18, 1) 100%);
      }
    }
    .info-button {
      height: 110rpx;
      border-top: 1rpx solid #ededed;
      border-bottom: 1rpx solid #ededed;
      font-size: 32rpx;
      color: #5884cc;
    }
  }
}
</style>
